
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="股票代码" prop="symbol">
        <el-input
          v-model="queryParams.symbol"
          placeholder="请输入股票代码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="股票名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入股票名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="最新价" prop="trade">
        <el-input
          v-model="queryParams.trade"
          placeholder="请输入最新价"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="涨跌额" prop="priceChange">
        <el-input
          v-model="queryParams.priceChange"
          placeholder="请输入涨跌额"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="涨跌幅" prop="changePercent">
        <el-input
          v-model="queryParams.changePercent"
          placeholder="请输入涨跌幅"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="买入价" prop="buy">
        <el-input
          v-model="queryParams.buy"
          placeholder="请输入买入价"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="卖出价" prop="sell">
        <el-input
          v-model="queryParams.sell"
          placeholder="请输入卖出价"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="昨日收盘价" prop="settlement">
        <el-input
          v-model="queryParams.settlement"
          placeholder="请输入昨日收盘价"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="今日开盘价" prop="open">
        <el-input
          v-model="queryParams.open"
          placeholder="请输入今日开盘价"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="今日最高价" prop="high">
        <el-input
          v-model="queryParams.high"
          placeholder="请输入今日最高价"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="今日最低价" prop="low">
        <el-input
          v-model="queryParams.low"
          placeholder="请输入今日最低价"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="成交量" prop="volume">
        <el-input
          v-model="queryParams.volume"
          placeholder="请输入成交量"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="成交额" prop="amount">
        <el-input
          v-model="queryParams.amount"
          placeholder="请输入成交额"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="股票代码" prop="code">
        <el-input
          v-model="queryParams.code"
          placeholder="请输入股票代码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="成交时间" prop="tickTime">
        <el-date-picker clearable
                        v-model="queryParams.tickTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择成交时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="stockLists">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="synchronousUpdate"
          v-hasPermi="['stock:stockList:synchronousUpdate']"
        >实时更新</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="stockLists"></right-toolbar>
    </el-row>

    <el-table  :data="voList">
      <el-table-column label="${comment}" align="center" prop="id" />
      <el-table-column label="股票代码" align="center" prop="symbol" />
      <el-table-column label="股票名称" align="center" prop="name" />
      <el-table-column label="最新价" align="center" prop="trade" />
      <el-table-column label="涨跌额" align="center" prop="priceChange" />
      <el-table-column label="涨跌幅" align="center" prop="changePercent" />
      <el-table-column label="买入价" align="center" prop="buy" />
      <el-table-column label="卖出价" align="center" prop="sell" />
      <el-table-column label="昨日收盘价" align="center" prop="settlement" />
      <el-table-column label="今日开盘价" align="center" prop="open" />
      <el-table-column label="今日最高价" align="center" prop="high" />
      <el-table-column label="今日最低价" align="center" prop="low" />
      <el-table-column label="成交量" align="center" prop="volume" />
      <el-table-column label="成交额" align="center" prop="amount" />
      <el-table-column label="股票代码" align="center" prop="code" />
      <el-table-column label="成交时间" align="center" prop="tickTime" width="180"></el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="stockDetails(scope.row.symbol,scope.row.trade)"
            v-hasPermi="['stock:stockList:stockDetails']"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="stockLists"
    />
  </div>
</template>



<script>
import {stockList, synchronousUpdate} from "@/api/stock/stock";
import path from "path";
export default {
  name: "index",
  data(){
    return{
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      voList: [],
      // 是否显示弹出层
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        symbol: null,
        name: null,
        trade: null,
        priceChange: '',
        changePercent: null,
        buy: null,
        sell: null,
        settlement: null,
        open: null,
        high: null,
        low: null,
        volume: null,
        amount: null,
        code: null,
        tickTime: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    }
  },methods:{
    stockDetails(symbol,trade){
      //alert(symbol)
      this.$router.push({path:"/stock/klinechart",query:{symbol:symbol,trade:trade}})
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.stockLists();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },stockLists(){
      stockList(this.queryParams).then(res=>{
        this.voList=res.rows;
        this.total=res.total;
      })
    },synchronousUpdate(){
      this.$modal.confirm('是否确认同步更新？').then(function() {
        synchronousUpdate().then(res=>{
          if(res.code==200){
            this.$modal.msgSuccess("更新成功");
          }
          else{
            this.$modal.msgError("更新失败");
          }
        })
      })
    }
  },created() {
    this.stockLists()
  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
